import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const containersDocs= { source: { code: `containers := component.NewContainers()
containers.Add("nginx-container", "nginx:1.17.0")`
}}

export const containerDefinition= {
  name: 'nginx-container',
  image: 'nginx:1.17.0',
};

export const containerView = {
  config: {
    containers: [containerDefinition],
  },
  metadata: {
    type: 'containers',
  },
};
export const ContainersStoryTemplate = args => ({
  template: `<app-view-containers [view]= "view"></app-view-containers>`,
  argTypes: argTypesView,
  props: {view: args.view},
});

<h1>Containers component</h1>
<h2>Description</h2>

<p>The Containers component is used to show info about containers.
It displays container name and container image.</p>
<h2>Example</h2>

<Meta title="Components/Containers" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="Containers component"
         parameters={{ docs: containersDocs }}
         args= {{ view: containerView }}>
    { ContainersStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Containers component" />
